<template>
  <section>
    <van-sticky>
      <PageHeader title="房产情况" />
    </van-sticky>

    <van-cell-group v-if="member">
      <van-cell title="房产" :value="member.house_status > 0 ? member.house_status_str : ''" is-link @click="houseStatusSheetVisible=true" />
      <van-cell title="房产所在地" :value="member.house_location_str" is-link @click="onShowRegionPopup"/>
    </van-cell-group>

    <div class="pd20">
      <van-button round block type="primary" @click="saveMemberProfile">保 存</van-button>
    </div>

    <van-action-sheet
      v-model="houseStatusSheetVisible"
      :actions="houseStatusActions"
      cancel-text="取消"
      description="房产情况"
      close-on-click-action
      @select="onHouseStatusActionsSelect"
    />

    <van-popup v-model="showRegionPopup" round position="bottom">
      <van-cascader
        v-model="selectedRegions"
        title="请选择所在地区"
        :options="provinceList"
        @close="showRegionPopup = false"
        @change="onRegionCascaderChange"
        @finish="onRegionCascaderFinish"
      />
    </van-popup>
  </section>
</template>

<script>
  import {
    regionChildrenUri,
    memberConstantsUri,
    STATIC_BASE_URL,
    memberSaveBaseInfoUri
  } from "../../../common/api";
  import PageHeader from "../../componets/PageHeader";
  import Vue from 'vue';
  import {Sticky, Popup, Button, Toast, Cell, CellGroup, ActionSheet, Dialog} from 'vant';
  Vue.use(Sticky).use(Popup).use(Button).use(CellGroup).use(Cell).use(ActionSheet).use(Dialog);

  export default {
    components: {
      PageHeader,
      [Dialog.Component.name]: Dialog.Component
    },
    data() {
      return {
        member: null,
        user: null,

        houseStatusSheetVisible: false,
        houseStatusActions: [],
        showRegionPopup: false,
        selectedRegions: '',
        provinceList: [],
        cityList: [],
      }
    },
    methods: {
      onHouseStatusActionsSelect(item) {
        this.houseStatusSheetVisible = false;
        this.member.house_status = item.value;
        this.member.house_status_str = item.name;
      },
      getRegions(parentId, callback) {
        const that = this;
        const url = regionChildrenUri + '?parent_id=' + parentId;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            callback(data.regions);
          }
        }, response => {
          // error callback
        })
      },
      onRegionCascaderChange(option) {
        const tabIndex = option.tabIndex;
        const value = option.value;
        if(tabIndex == 0) {
          if(value > 0) {
            const provinceList = this.provinceList;
            let provinceIndex = 0;
            for (let i = 0; i < provinceList.length; i++) {
              if(value == provinceList[i].value) {
                provinceIndex = i;
                break;
              }
            }
            this.getRegions(value, (regions) => {
              let children = [];
              children.push({
                text: '不限',
                value: 0
              });
              for (let i = 0; i < regions.length; i++) {
                children.push({
                  text: regions[i].region_name,
                  value: regions[i].region_id
                })
              }
              let province = provinceList[provinceIndex];
              province.children = children;
              this.$set(provinceList, provinceIndex, province);
            })
          } else {
            let children = [];
            children.push({
              text: '不限',
              value: 0
            });
            const provinceList = this.provinceList;
            let provinceIndex = 0;
            let province = provinceList[provinceIndex];
            province.children = children;
            this.$set(provinceList, provinceIndex, province);
          }
        }
      },
      onRegionCascaderFinish({ selectedOptions }) {
        this.member.house_location_str = selectedOptions[0].text + selectedOptions[1].text;
        this.member.house_location = selectedOptions[1].value;
        this.showRegionPopup = false;
      },
      onShowRegionPopup() {
        this.showRegionPopup = true;
      },
      getConstants() {
        const that = this;
        const url = memberConstantsUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            let houseStatusActions = [];
            for (let key in data.house_status) {
              houseStatusActions.push({
                name: data.house_status[key],
                value: key
              })
            }
            that.houseStatusActions = houseStatusActions;
          }
        }, response => {
          // error callback
        })
      },
      saveMemberProfile() {
        const that = this;
        const formData = {
          house_status: this.member.house_status,
          house_location: this.member.house_location,
        };
        that.$http.post(memberSaveBaseInfoUri, formData, {emulateJSON: true}).then(response => {
          let {msg, code, data} = response.body
          if (code != 0) {
            Toast.fail(msg)
          } else {
            that.member = data.member;
            that.GLOBAL.memberProfile = data.member;
            Toast.success('保存成功');
            that.$router.back();
          }
        }, response => {
          Toast.fail('发生错误')
        })
      }
    },
    mounted: function () {
      this.member = this.GLOBAL.memberProfile;
      this.user = this.GLOBAL.userInfo;

      this.EventBus.$on('OnUserLogined', () => {
        this.user = this.GLOBAL.userInfo;
        this.member = this.GLOBAL.memberProfile;
      });

      this.getConstants();
      this.getRegions(1, (regions) => {
        let provinceList = [];
        provinceList.push({
          text: '不限',
          value: 0,
          children: []
        });
        for (let i = 0; i < regions.length; i++) {
          provinceList.push({
            text: regions[i].region_name,
            value: regions[i].region_id,
            children: []
          })
        }
        this.provinceList = provinceList;
      });
    }
  }
</script>

<style scoped>

</style>
